<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>大屏渲染</title>
  <link rel="stylesheet" href="../static/css/atom.css">
</head>

<body>
  <div id="container"></div>

  <script type="importmap">
        {
          "imports": {
            "three": "../three/v170/three.module.min.js",
            "three/addons/": "../three/v170/"
          }
        }
      </script>

  <script type="module">
    import * as THREE from 'three';
    import { CSS2DRenderer, CSS2DObject } from "three/addons/renderers/CSS2DRenderer.js";
    import { CSS3DRenderer, CSS3DObject } from "three/addons/renderers/CSS3DRenderer.js";
    import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
    import { DragControls } from 'three/addons/controls/DragControls.js';
    import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

    console.log(`[THREE版本]`, THREE.REVISION);

    let camera, scene, renderer;
    let controls;

    init();
    animate();

    function init() {
      const container = document.getElementById('container');
      camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 5000);
      camera.position.set(500, 500, 500);

      scene = new THREE.Scene();

      const geometry = new THREE.BoxGeometry(200, 200, 200);
      const textureLoader = new THREE.TextureLoader();

      /* const material = new THREE.MeshBasicMaterial({
          color: 0xff00ff,// 颜色
      });
      const cube = new THREE.Mesh(geometry, material); */

      // 6个面设置不同的颜色
      const materials = [
        new THREE.MeshBasicMaterial({ color: 0xff0000 }), // 红色
        new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // 绿色
        new THREE.MeshBasicMaterial({ color: 0x0000ff }), // 蓝色
        new THREE.MeshBasicMaterial({ color: 0xffff00 }), // 黄色
        new THREE.MeshBasicMaterial({ color: 0xff00ff }), // 品红色
        new THREE.MeshBasicMaterial({ color: 0x00ffff })  // 青色
      ];
      const cube = new THREE.Mesh(geometry, materials);
      scene.add(cube);

      renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0xADD8E6, 1);// 设置背景颜色
      container.appendChild(renderer.domElement);

      console.log(47, Object.keys(renderer));

      controls = new OrbitControls(camera, renderer.domElement);// 添加控制器
      controls.enablePan = true;// 添加平移功能

      var axesHelper = new THREE.AxesHelper(1000);
      scene.add(axesHelper);// 创建坐标轴辅助对象

      const gui = new GUI({
        title: '常规控制'
      });


      // 颜色选择器 -- 使用颜色选择器来动态调整物体的颜色：
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      gui.addColor(material, 'color').onChange((color) => {
        material.color.set(color);
      });

      const basicFolder = gui.addFolder('常规控制');
      // 滑块控件 -- 添加滑块控件来控制物体的旋转速度和缩放比例：
      const cubeParams = {
        rotationSpeed: 0.01,
        scale: 1,
        testscale: 1,
        wireframe: false,
        shape: '立方体',
        shapes: ['立方体', '球体']
      };
      basicFolder.add(cubeParams, 'rotationSpeed', 0, 0.1).name('Rotation Speed');
      basicFolder.add(cubeParams, 'scale', 0.5, 2).name('Scale').onChange((value) => {
        cube.scale.set(value, value, value);
      });
      basicFolder.add(cubeParams, 'testscale', 1, 20).name('Scale').onChange((value) => {
        cube.scale.set(value, value, value);
      });

      // 复选框 -- 使用复选框来控制物体是否显示为线框
      basicFolder.add(cubeParams, 'wireframe').name('Wireframe').onChange((value) => {
        materials.forEach(material => {
          material.wireframe = value;
        });
      });

      // 下拉列表 -- 创建下拉列表以选择不同的几何体类型：
      basicFolder.add(cubeParams, 'shape', cubeParams.shapes).onChange((shape) => {
        scene.remove(cube); // 移除当前立方体

        let newGeometry;
        let newMaterial;

        if (shape === '立方体') {
          newGeometry = new THREE.BoxGeometry(200, 200, 200);
          newMaterial = materials; // 使用多材质
        } else {
          newGeometry = new THREE.SphereGeometry(100, 32, 32); // 球体的半径需要调整
          newMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 单一颜色
        }

        cube.geometry.dispose(); // 清理旧几何体
        cube.geometry = newGeometry; // 设置新几何体
        cube.material = newMaterial; // 设置新材质

        scene.add(cube); // 添加新立方体到场景中
        renderer.render(scene, camera); // 重新渲染场景
      });

      const isFullscreen = gui.addFolder('全屏操作');
      // 按钮事件 -- 可以添加按钮来触发特定事件，例如全屏切换：
      let eventObj = {
        全屏: function () {
          document.body.requestFullscreen();
        },
        退出全屏: function () {
          document.exitFullscreen();
        }
      };
      isFullscreen.add(eventObj, '全屏');// Fullscreen
      isFullscreen.add(eventObj, '退出全屏');// ExitFullscreen
      isFullscreen.close()

      console.log(`a0012-GUI.html 84 [Object.keys(gui)]`, Object.keys(gui));
      console.log(`a0012-GUI.html 85 [gui.__controllers]`, gui.__controllers);
      console.log(`a0012-GUI.html 86 [gui.children]`, gui.children);
      console.log(`a0012-GUI.html 87 [gui.folders]`, gui.folders);
      console.log(`a0012-GUI.html 88 [gui.controllers]`, gui.controllers);

    }

    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
      requestAnimationFrame(animate);
      controls.update();
      renderer.render(scene, camera);
    }
  </script>

</body>

</html>